<template>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="v in lists" :key="v.path">
            <router-link :to="v.path">{{v.meta.title}}</router-link>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>       
</template>



<script setup>
import { ref,onMounted,watch} from 'vue'
import {useRoute} from "vue-router";  //导入路由
 
  const route = useRoute();  
  const lists = ref([]);   
    //监听普通类型
    watch(route, (to,from) => { //直接监听
        getBreadcrumb(to.matched);
    });

    onMounted(()=>{ //生命周期-挂载完成
        getBreadcrumb(route.matched);
    })
    function getBreadcrumb(matched){
        lists.value = matched;
    }
</script>

<style scoped>

</style>
